<template>
  <div :style="{ border: '1px solid #000' }">
    <h1>App:a-{{ data.a }}--b--{{ data.b }}--c--{{ data.c }}</h1>
    <One />
  </div>
</template>

<script>
import One from "@/components/One";
export default {
  name: "App",
  components: {
    One,
  },
  data() {
    return {
      data: {
        a: 1,
        b: 2,
        c: 3,
      },
    };
  },
  //provide可以写成一个对象写法,但是没有this,无法拿到实例上的数据进行共享
  /* provide: {
    a: this.a,
  }, */
  //provide就是在祖辈组件中提供数据的 推荐写成函数写法,函数内部return的对象的属性就是共享的数据
  provide() {
    return {
      data: this.data,
      changea: this.changea,
      changeb: this.changeb,
      changec: this.changec,
    };
  },
  methods: {
    changea(value) {
      this.data.a = value;
    },
    changeb(value) {
      this.data.b = value;
    },
    changec(value) {
      this.data.c = value;
    },
  },
};
</script>

<style></style>
